<template>
	<view class="payment">
		<!-- 自定义导航栏 -->
		<uniNavBar title="确认支付" leftText="关闭" fixed="true"  @clickLeft="back()"></uniNavBar>
		<!-- 支付列表 -->
		<view class="pay-List">
			<label>
				<view class="pay-item">
					<view class="item-main">
						<image class="item-image"
							src="https://img2.baidu.com/it/u=1744097788,3653714745&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
							mode=""></image>
						<view class="item-text">
							<view>支付宝支付</view>
							<view class="f-color" style="font-size: 26rpx;">推荐支付宝用户使用</view>
						</view>
					</view>
					<label class="radio">
						<radio :checked="type=='zfb'" value=""  @click="changePay('zfb')"/>
					</label>
				</view>
			</label>
			<label>
				<view class="pay-item">
					<view class="item-main">
						<image class="item-image"
							src="https://img1.baidu.com/it/u=1616447740,2353901875&fm=253&fmt=auto&app=138&f=JPEG?w=328&h=329"
							mode=""></image>
						<view class="item-text">
							<view>微信支付</view>
							<view class="f-color" style="font-size: 26rpx;">推荐微信用户使用</view>
						</view>
					</view>
					<label class="radio">
						<radio :checked="type=='wx'" value=""  @click="changePay('wx')"/>
					</label>
				</view>
			</label>
		</view>
		<!-- 去支付按钮 -->
		<view class="pay-footer">
			<view class="pay-price ">
				<view class=" price-text f-color">
					合计
				</view>￥{{details.totalPrice}}
			</view>
			<view @click="goPaymentSuccess()" class="go-pay">
				去支付
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import uniNavBar from '@/components/uniapp/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				type:'',
				// 合计
				details:{
					totalPrice:0
				}
			}
		},
		components: {
			uniNavBar,
		},
		onLoad(e) {
			uni.showLoading({
				
			})
			setTimeout(()=>{
				uni.hideLoading()
			},1000)
			this.details=JSON.parse(e.details)
		},
		computed:{
		},
		methods: {
			// 返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changePay(type){
				this.type=type
			},
			goPaymentSuccess(){
				if(this.type==''){
					uni.showToast({
						title:'请选择支付方式',
						icon:'none'
					})
				}else{
					$http.request({
						url: '/submitPay',
						method:"post",
						header:{
							'content-type': 'application/x-www-form-urlencoded',
							token:true
						},
						data:{
							orderNumber:this.details.orderNumber
						}
						
					}).then((res) =>{
						if(res.success){
							uni.navigateTo({
								url:'../payment-success/payment-success'
							})
						}
					}).catch(() => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						})
					})
					
					
				}
			}
		}
	}
</script>

<style scoped>
	.pay-List {
		margin-left: 20rpx;
	}

	.pay-item {
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
		border-bottom: 2rpx solid #F1F1F1;
		align-items: center;
	}

	.item-main {
		display: flex;
	}

	.item-image {
		width: 80rpx;
		height: 80rpx;
		margin-left: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.item-text {
		padding-left: 60rpx;
	}
	.pay-footer{
		color: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;

		width: 100%;
		height: 140rpx;
	}
	
	.pay-price{
		display: flex;
		line-height: 100rpx;
		flex: 2;
		background-color: #000000;
	}
	.price-text{
		padding: 0 30rpx;
	}
	.go-pay{
		background-color: #00B7FF;
		text-align: center;
		line-height: 100rpx;
		flex: 1;
	}
</style>
